﻿<!DOCTYPE HTML>
<html>
<head>
    <title>会员</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    @*<link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />*@
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
    <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <form id="searchForm" class="form-horizontal span24">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">账号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="account" placeholder="账号">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">手机：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="phone" placeholder="手机号码">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">昵称：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="nickname" placeholder="昵称">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">姓名：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="truename" placeholder="姓名">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span12">
                        <label class="control-label">备注：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="remark" placeholder="备注">
                        </div>
                    </div>
                    <div class="span3 offset2">
                        <button type="submit" id="btnSearch" class="button button-primary">搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="search-grid-container">
            <div id="grid"></div>
        </div>
    </div>
    <div id="memberContent" class="hidden" style="display:none;">
        <form id="form" class="form-horizontal">
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">账户：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="account" data-rules="{required : true}">
                    </div>
                </div>
            </div>
            <div class="row pwd">
                <div class="control-group span8">
                    <label class="control-label">密码：</label>
                    <div class="controls">
                        <input type="password" class="input-normal control-text" id="pwd" data-rules="{required : true}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">昵称：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="nickName">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">姓名：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="trueName">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">手机：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="phone">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">收件地址：</label>
                    <div class="controls">
                        <textarea id="address" class="input-normal form-control"></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">备注：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="remark">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">状态：</label>
                    <div class="controls">
                        <select id="isActive" class="input-small">
                            <option value="true">正常</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="~/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="~/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="~/assets/js/config-min.js"></script>
    <script type="text/javascript">
        BUI.use('common/page');
    </script>
    <script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201309041336"></script>
    <script type="text/javascript">
        var memberId = null;
        var memberDialog = null;
        var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                { title: '账号', width: 50, sortable: false, dataIndex: 'account' },
                { title: '昵称', width: 50, sortable: true, dataIndex: 'nickName' },
                {
                    title: '姓名', width: 50, sortable: false, dataIndex: 'trueName'
                },
                { title: '手机', width: 100, sortable: true, dataIndex: 'phone' },
                { title: '金额(充值)', width: 100, sortable: true, dataIndex: 'cash' },
                { title: '金额(赠送)', width: 100, sortable: true, dataIndex: 'zcash' },
                { title: '收件地址', width: 150, sortable: true, dataIndex: 'address' },
                { title: '备注', width: 100, sortable: true, dataIndex: 'remark' },
                { title: '注册时间', width: 100, sortable: true, dataIndex: 'registerDate' },
                {
                    title: '状态', width: 300, dataIndex: 'isActive', renderer: function (value, obj) {
                        return value ? "正常" : "禁用";
                    }
                },
                {
                    title: '操作', width: 300, dataIndex: 'id', renderer: function (value, obj) {
                        var edit = "<span class='grid-command' onclick='edit(" + JSON.stringify(obj) + ")'>编辑</span>";
                        var changePwd = "<span class='grid-command' onclick='changePwd(" + JSON.stringify(obj) + ")'>更新密码</span>";

                        return edit + changePwd
                    }
                }
            ];

        var store = new Store({
            url: '/member/list',
            autoLoad: true,
            pageSize: 10
        });

        var grid = new Grid.Grid({
            render: '#grid',
            loadMask: true,
            forceFit: true,
            columns: columns,
            store: store,
            plugins: [Grid.Plugins.AutoFit], //勾选插件、自适应宽度插件
            tbar: {
                items: [{
                    btnCls: 'button button-primary button-small',
                    text: '增加',
                    handler: function () {
                        memberId = null;
                        $("#form").get(0).reset();
                        $("#account").removeAttr("disabled")
                        memberDialog.show();
                        $(".pwd").show();
                    }
                }]
            },
            // 顶部工具栏
            bbar: {
                //items 也可以在此配置
                // pagingBar:表明包含分页栏
                pagingBar: true
            }
        });
        grid.render();

        //创建表单，表单中的日历，不需要单独初始化
        var form = new BUI.Form.HForm({
            srcNode: '#searchForm'
        }).render();

        form.on('beforesubmit', function (ev) {
            //序列化成对象
            var obj = form.serializeToObject();
            obj.start = 0; //返回第一页
            store.load(obj);
            return false;
        });

        function edit(member) {
            $(".pwd").hide();
            memberDialog.show()
            $("#form").get(0).reset();
            memberId = member.id;
            $("#account").val(member.account).attr("disabled", "disabled");
            $("#pwd").val(member.pwd);
            $("#nickName").val(member.nickName);
            $("#trueName").val(member.trueName);
            $("#remark").val(member.remark);
            $("#phone").val(member.phone);
            $("#isActive").val(member.isActive ? "true" : "false")
            $("#address").val(member.address);
        }

        BUI.use(['bui/overlay', 'bui/form'], function (Overlay, Form) {
            var form = new Form.HForm({
                srcNode: '#form'
            }).render();

            memberDialog = new Overlay.Dialog({
                title: '新增/编辑会员',
                width: 500,
                height: 520,
                contentId: 'memberContent',
                success: function () {
                    var account = $.trim($("#account").val());
                    var pwd = $("#pwd").val();
                    if (account == "") {
                        BUI.Message.Alert('请输入账户', 'warning');
                        return;
                    }

                    if (memberId == null && pwd == "") {
                        BUI.Message.Alert('请输入密码', 'warning');
                        return;
                    }

                    var phone = $.trim($("#phone").val());
                    var trueName = $.trim($("#trueName").val());
                    var nickName = $.trim($("#nickName").val());
                    var remark = $.trim($("#remark").val())
                    var isActive = $("#isActive").val();
                    var address = $("#address").val()

                    $.post("/member/save", {
                        id: memberId, isActive: isActive,
                        account: account, pwd: pwd, phone: phone,
                        trueName: trueName, nickName: nickName, remark: remark, address: address
                    }, function (res) {
                        if (res.success) {
                            $("#form").get(0).reset()
                            memberDialog.close();
                            store.load()
                        }
                        else {
                            BUI.Message.Alert('保存失败:' + res.message, 'warning');
                        }
                    })
                }
            });
        });

    </script>
</body>
</html>
